<template>
	<div class="collection">
<!--		<van-tabs-->
<!--			v-model:active="state.active"-->
<!--			line-width="20px"-->
<!--			title-inactive-color="#484848"-->
<!--			:before-change="tabsBeforeChange"-->
<!--		>-->
<!--			<van-tab v-for="item of state.tabs" :title="item.key" :key="item.value"></van-tab>-->
<!--		</van-tabs>-->

		<van-list
			class="list"
			v-model:loading="state.loading"
			:finished="state.finished"
			finished-text="没有更多了"
			@load="getCollectRecord"
		>
			<div class="list_item"
           v-for="item of state.collectRecord"
           :key="item.id"
      >
				<van-image @click="avatarClick(item)" round width="45px" height="45px" fit="cover" :src="showUserAvatar(item)" />
				<div class="right">
					<div class="info" @click="avatarClick(item)">
						<div class="name">
							<span>{{ item.user.store ? item.user.store.title : (item.user.nick_name || item.username) }}</span>
							<img v-if="item.user.is_guest == '1' && showVip(item.like_member)" class="vip" src="@/assets/img/vip_icon.png" />
							<img v-if="item.user.is_guest == '1' && item.like_member.is_vip_video" class="certification" src="@/assets/img/certification_icon.png" />
						</div>
						<div v-if="item.user.is_guest == '1'" class="address">{{ item.like_member.province }}-{{ item.like_member.city }}-{{ item.like_member.area }}</div>
            <div class="address" style="margin-top: 4px;">{{item.add_time}}</div>
					</div>
<!--					<img class="delete" src="@/assets/img/delete_icon.png" v-debounce="() => delCollect(item.like_user_id)" />-->
				</div>
			</div>
		</van-list>
	</div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { useMainStore } from '@/store/index';
import { collectRecord } from '@/api/my';
import { saveCollect } from '@/api/index';
import { Toast } from 'vant';
import showVip from '@/hooks/showVip';
import {useRoute, useRouter} from "vue-router";

const imgUrl = import.meta.env.VITE_IMG_URL;
const router = useRouter();
const route = useRoute();
const mainStore = useMainStore();
const state = reactive<any>({
	active: 0,
	loading: false,
	finished: false,
	tabs: [
		{ key: '用户', value: 1 },
		{ key: '红娘', value: 3 },
		{ key: '门店', value: 4 }
	],
	pageInfo: {
		pageIndex: 1,
		pageSize: 10,
		user_id: mainStore.user_id,
		state: 1,
    is_fans: 1
	},
	collectRecord: []
});

// 用户头像显示
const showUserAvatar = (item:any) => {
  if (item.user.store) {
    return imgUrl + item.user.store.storeimgs
  }
  return item.user.head_img_url;
}

const checkRoles = (item:any,key: string): boolean => {
  return String(item.user?.identity).split(',').includes(key);
};

// 头像点击
const avatarClick = (item:any): any => {
  if (typeof mainStore.userInfo.audit_state != 'undefined' && mainStore.userInfo.audit_state != 1) {

  } else {
    if (!mainStore.userInfo.identity || mainStore.userInfo.identity == '0') {
      router.push('/registered');
      return;
    }
  }
  if (!(item.user?.is_guest)) {
    return Toast.fail('该用户是游客身份')
  }
  let type: string;
  let name: string;
  type = 'user'
  name = 'memberDetail'
  if (checkRoles(item,'4')) {
    type = 'stores'
    name = 'memberDetail'
  } else if (checkRoles(item,'3')) {
    type = 'matchmaker'
    name = 'userDetail'
  } else {
    type = 'user'
    name = 'memberDetail'
  }
  router.push({ name: name, query: { user_id:item.user_id, type } });
};

// tab切换
const tabsBeforeChange = (name: number | string): boolean => {
	state.pageInfo.state = state.tabs[name].value;
	state.pageInfo.pageIndex = 1;
	state.collectRecord = [];
	getCollectRecord();
	return true;
};

const delCollect = async (like_user_id: number) => {
	const res = await saveCollect(mainStore.user_id, like_user_id);
	Toast(res.errorInfo);
	state.pageInfo.pageIndex = 1;
	state.collectRecord = [];
	getCollectRecord();
};

// 获取收藏记录
const getCollectRecord = async () => {
	const res = await collectRecord(state.pageInfo);
	let { dataList } = res.data;
	if (dataList.length) {
		state.pageInfo.pageIndex++;
		state.collectRecord = [...state.collectRecord, ...dataList];
		state.loading = false;
	} else {
		state.finished = true;
	}
	console.log(res);
};
</script>

<style lang="scss" scoped>
:deep(.van-tabs) {
	width: 100%;
	.van-tabs__wrap {
		height: 55px !important;
		.van-tabs__nav {
			padding-left: 80px;
			padding-right: 80px;
			justify-content: space-between;
			.van-tab {
				flex: auto;
				padding: 0;
				font-size: 15px;
			}
			.van-tab--active {
				font-size: 16px;
				font-weight: bold;
			}
			.van-tabs__line {
				background: #f6438a;
			}
		}
	}
}
.collection {
	min-height: 100vh;
	background: #f5f5f5;
	.list {
		height: calc(100vh - 80px);
		overflow: scroll;
		padding: 10px 15px;
		.list_item {
			@include flx-justify-between;
			height: fit-content;
			box-sizing: border-box;
			padding: 15px;
			margin-bottom: 5px;
			border-radius: 5px;
			background: white;
			.right {
				@include flx-justify-between;
				height: 100%;
				flex: 1;
				margin-left: 10px;
				.info {
					.name {
						@include flx-align-center;
						margin-bottom: 5px;
						font-size: 16px;
						font-weight: bold;
						.vip {
							width: 16px;
							height: 14px;
							margin-left: 5px;
						}
						.certification {
							width: 54px;
							height: 20px;
							margin-left: 5px;
						}
					}
					.address {
						font-size: 12px;
						font-family: Noto Sans S Chinese;
						font-weight: 400;
						color: #808080;
					}
				}
				.delete {
					width: 13px;
					height: 15px;
				}
			}
		}
	}
}
</style>
